<template>
  <div>
    <div class="music">最新音乐</div>
    <MusicItem v-for="item in newList" :key="item.id"
      :name="item.name"
      :artistsName="item.song.artists[0].name"/>

  </div>
</template>

<script>
import { newSong } from '@/api/recommend.js'
import MusicItem from '@/components/MusicItem.vue'
export default {
  name: 'home',
  data () {
    return {
      newList: []
    }
  },

  created () {
    this.getNewSong()
  },

  methods: {
    async getNewSong () {
      const res = await newSong({
        limit: 20
      })
      this.newList = res.data.result
    }
  },
  components: {
    MusicItem
  }
}
</script>

<style scoped>
.music{
  height: 50px;
  line-height: 50px;
  background: red;
  color: #fff;
  padding: 0 10px;
}
</style>
